import React from 'react';
import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';
import TextField from '@material-ui/core/TextField';

import $ from 'jquery'

class MyLoginBox extends React.Component {
  constructor(props) {
    super(props);
    this.loginUrl = props.loginUrl;
    this.state = {//数据存储在state中，初始化用state方法；合并新内容用setState方法；替换原有内容用replaceState方法
      usernumber: '',
      password: ''
    };
  }
  /**
   * 处理文本框输入：本质是进行数据绑定；或称为响应式设计
   */
  handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
      //注意Textfield中name与state中变量名是相同的
      //另一种表示方法：此处写value，而后在render中的Textfield中加入Value=this.state.value
    });
  }

  /**
   * 以Post方式提交json格式的信息
   */
  handleSubmit(event) {
    $.ajax({
      type: "POST",
      url: this.loginUrl,
      contentType: "application/json; charset=utf-8",
      data: JSON.stringify({
        usernumber:this.state.usernumber,
        password:this.state.password
      }),
      dataType: "json",
      success: function (data) {//当查询到数据或未查询到数据时
        if (data) {
          alert("登录成功");
        }else{
          alert("登录失败");
        }
      },
      error: function (message) {//当返回错误信息时
        alert("登录失败");
      }
    });

  }


  render() {
    return (
      <Container maxWidth="sm">
        <form>
          <TextField
            type="text"
            id="input-with-icon-grid"
            label="用户名"
            name="usernumber"
            onChange={(e) => this.handleInputChange(e)}
            //onChange可以使用箭头函数，也可以使用bind函数，方法是onChange={this.inputChange.bind(this)}
          /><br />
          <TextField
            type="password"
            id="standard-basic"
            label="密码"
            name="password"
            onChange={(e) => this.handleInputChange(e)}
          /><br />
          <Button variant="contained" onClick={(e) => this.handleSubmit(e)
          //注意：若添加type="submit"则按钮无法正常运行
          }>登录</Button>
        </form>
      </Container>
    )
  }
}
export default MyLoginBox;//该行也可以直接加入到class行前
